<template>
	<view class="content">
		<view class="toolbar" @click="format">
			<view data-name="bold" :class="formats.bold ? 'active' : ''" data-label="加粗" class="icon iconfont icon-jiacu"></view>
			<view data-name="italic" :class="formats.italic ? 'active' : ''"  data-label="斜体" class="icon iconfont icon-zitixieti"></view>
			<view data-name="align" :class="(formats.align === 'left') ? 'active' : ''"  data-value="left" data-label="居左" class="icon iconfont icon-zuoduiqi"></view>
			<view data-name="align" :class="(formats.align === 'center') ? 'active' : ''"  data-value="center" data-label="居中" class="icon iconfont icon-juzhong"></view>
			<view data-name="align" :class="(formats.align === 'right') ? 'active' : ''"  data-value="right" data-label="居右" class="icon iconfont icon-youduiqi"></view>
			<picker mode="selector" :range="fontSizes" :index="index" @change="fontSize">
			    <view :class="formats.fontSize ? 'active' : ''"  class="icon iconfont icon-728bianjiqi_zitidaxiao"></view>
			</picker>
			<view data-name="color" @click.stop="openColor" :style="{color:fontColor}" class="icon iconfont icon-ziyuan"></view>
			<view @click.stop="insertImage" class="icon iconfont icon-tupian"></view>
			<view @click.stop="clear" class="icon iconfont icon-qingkong"></view>
		<!-- 	<view @click.stop="undo" class="icon iconfont icon-chexiao"></view>
			<view @click.stop="redo" class="icon iconfont icon-web-icon-"></view> -->
			<view @click.stop="save" style="margin-left: 10rpx;">保存</view>
		</view>
		<editor id="editor" class="ql-container" :placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady"></editor>
		<!-- // 颜色 选择器 -->
		<uni-popup ref="popup" type="bottom" @transed="colorPop">
			<color-picker :color="color" :show="showColor" @confirm="colorChanged" @cancel="colorPopClose"></color-picker>
		</uni-popup>
	</view>
</template>
 
<script>
	export default {
		data() {
			return { 
				placeholder: '开始输入...',
				formats:{},
				fontSizes:[10, 12, 14, 16, 18, 24, 32],
				index:0,
				fontColor: "",
				showColor: false,
				imgPaths:[], // 存储网络地址
				locaImgPaths:[]  // 存储本地地址
			}
		},
		props:{
			html:{
				type:String
			}
		},
		onLoad() {

		},
		methods: {
			onStatusChange(e){
				this.formats = e.detail;
				// console.log(this.formats);
			},
			// 字体大小
			fontSize(e){
				this.index = parseInt(e.detail.value);
				let fz = this.fontSizes[this.index]+"px";
				this._format("fontSize",fz);
			},
			// 格式化 一些样式
			format(e){
				let {
					name,
					label,
					value
				} = e.target.dataset
				if(!name) return;
				this._format(name,value,label)
			},
			_format(name,value,label){
				 this.editorCtx.format(name, value)
			},
			insertImage() {
			    let params = {}
			    // params.count = this.muiltImage ? 9 : 1
			    // params.sizeType = this.compressImage ? ['compressed'] : ['original']
			    uni.chooseImage({
			        count:9,
			        success: (res) => {
						if(res.tempFilePaths.length > 0){
							this.uploadFile(res.tempFilePaths);
						}
			        },
					fail() {
						uni.showToast({
							icon:"none",
							title: '获取图片失败'
						});
					}
			    })
			},
			uploadFile(tempFilePaths){
				tempFilePaths.forEach(path => {
					uniCloud.uploadFile({
						filePath:path
					}).then(data=>{
						if(data.success){
							this.editorCtx.insertImage({
							    src: data.fileID,
							    alt: '图像'
							})
							// 保存 地址 如果上传错误用来删除
							this.imgPaths.push(data.fileID);
						}
					}).catch(err=>{
						uni.showToast({
							icon:"none",
							title: '上传失败，稍后重试'
						});
					})
				})
			},
			save(){
				this.editorCtx.getContents({
					success:res=>{
						this.$emit('save',res)
					}
				})
			},
			onEditorReady() {
                uni.createSelectorQuery().in(this).select('#editor').context((res) => {
                    this.editorCtx = res.context
					if(this.html){
						this.editorCtx.setContents({
							html:this.html
						})
					}
                }).exec()
            },
			// 清空编辑器
			clear(){
				uni.showModal({
					title: '提示',
					content: '是否清空已经编辑的内容',
					cancelText: '取消',
					confirmText: '确认清空',
					success: res => {
						if(res.confirm){
							// 删除已有的文件
							if(this.imgPaths.length > 0){
								this.deleteFile(this.imgPaths);
							}
							// 清空
							this.editorCtx.clear();
						}
					}
				});
			},
			deleteFile(fileList){
				uniCloud.deleteFile({
					fileList
				}).then(res=>{
					if(res.success){
						this.imgPaths = [];
						console.log("数据库文件已经三处");
					}
				}).catch(err=>{
					// 删除图片失败 重新渲染出来
					fileList.forEach(path=>{
						this.editorCtx.insertImage({
						    src: path,
						    alt: '图像'
						})
					})
					uni.showToast({
						icon:"none",
						title: '删除图片失败'
					});
				})
			},
			// 撤回
            // undo() {
            //     this.editorCtx.undo();
            // },
			// 恢复
			// redo(){
			// 	 this.editorCtx.redo();
			// },
			colorPop(e) {
			    this.showColor = e.show
			},
			// 打开颜色 选择器
			openColor(){
				this.$refs.popup.open();
			},
			colorChanged(e){
				let label = ''
				this.fontColor = e.color
				label = '颜色'
				this.colorPopClose()
				this._format("color", e.color, label + e.color)
			},
			colorPopClose(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.toolbar{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #C0C0C0;
		.iconfont{
			font-size: 48rpx;
			margin-right: 10rpx;
		}
	}
	.active{
		color: #ff557f;
	}
	.ql-container{
		height: 400rpx;
		background: #FFFFFF;
		border: 1rpx solid #C0C0C0;
	}
</style>
